<template>
	<div>
		<div class="left-content">
			<div class="title-content">
				<p>
					<</p>
			</div>
			<p class="content">
				销量
			</p>
			<div v-for="bb in 4" class="KH">
				<img src="../assets/img/fenlei/chuncai.png" />
			</div>
		</div>
		<div class="left-bg"></div>
		<div class="right-content">
			<div class="title-fahuo">
				<img src="../assets/img/fenlei/fahuo.png" />
				<p>发货地</p>
			</div>
			<div class="guojia">
				<p>日本</p>
				<p>美国</p>
				<p>中国</p>
				<p>澳大利亚</p>
				<p>英国</p>
			</div>
			<div class="leixing">
				<div class="splx">
					<img src="../assets/img/fenlei/shangpin.png" />
					<p>首发商品</p>
				</div>
				<div class="cx">
					<p>促销商品</p>
					<p>首发商品</p>
				</div>
				<div class="fenlei">
					<img src="../assets/img/fenlei/fenlei.png" />
					<p>分类</p>
				</div>
				<div class="xunhuanba">
					<div v-for="jiemian in 5" class="jmhl">
						<div class="jiem">
							<p>洁面护理</p>
						</div>
					</div>
					<div v-for="kh in 5" class="rqkh">
						<p>人气口红</p>
					</div>
					<div v-for="mingpai in 4" class="mingpai">
						<p>名牌包包</p>
					</div>
					<div class="gdfl">
						<p class="gengduo">
							<a href="#/fenlei05">更多分类></a>
						</p>
					</div>

				</div>
				<div class="chongzhi">
					<p class="cz"><a href="#/fenlei03">重置</a></p>
					<p class="qd">确定</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.left-bg {
		position: absolute;
		width: 14rem;
		left: 0;
		top: 0;
		height: 128rem;
		background: black;
		opacity: 0.4;
	}
	
	.left-content {
		float: left;
		width: 14rem;
		height: 128rem;
		background: darkgray;
	}
	
	.title-content {
		width: 14rem;
		height: 9.6rem;
		background: red;
	}
	
	.title-content p {
		font-size: 5rem;
		color: white;
		padding-top: 1.5rem;
		padding-right: 7rem;
	}
	
	.content {
		height: 8rem;
		font-size: 2.6rem;
		line-height: 8rem;
		border-bottom: 0.1rem solid gray;
		color: red;
		background: white;
	}
	
	.KH {
		height: 20rem;
		border-bottom: 1px solid gray;
		margin-bottom: 1.5rem;
		background: white;
	}
	
	.KH img {
		height: 15.3rem;
		padding-left: 6rem;
		margin-top: 2.4rem;
	}
	
	.right-content {
		float: left;
		width: 58rem;
		height: 143rem;
	}
	
	.title-fahuo img {
		float: left;
		width: 3.4rem;
		height: 3rem;
		margin: 2rem 2.5rem;
	}
	
	.title-fahuo p {
		float: left;
		font-size: 3rem;
		margin: 1.5rem 0;
	}
	
	.guojia {
		margin-top: 8rem;
	}
	
	.guojia p {
		float: left;
		margin-left: 2rem;
		margin-bottom: 2rem;
		width: 16rem;
		height: 8rem;
		background: #f2f2f2;
		border-radius: 1rem;
		font-size: 2.7rem;
		line-height: 8rem;
	}
	
	.leixing {
		width: 58rem;
		height: 17rem;
		border-top: 0.1px solid darkgray;
		border-bottom: 0.1px solid darkgray;
		float: left;
	}
	
	.splx img {
		float: left;
		width: 3.4rem;
		height: 3rem;
		margin: 2rem 2.5rem;
	}
	
	.splx p {
		float: left;
		font-size: 3rem;
		margin: 1.5rem 0;
	}
	
	.cx {
		margin-top: 8rem;
	}
	
	.cx p {
		float: left;
		margin-left: 2rem;
		margin-bottom: 2rem;
		width: 16rem;
		height: 8rem;
		background: #f2f2f2;
		border-radius: 1rem;
		font-size: 2.7rem;
		line-height: 8rem;
	}
	
	.fenlei {
		width: 58rem;
		height: 10rem;
		float: left;
		margin-top: 0rem;
	}
	
	.fenlei img {
		float: left;
		width: 3.4rem;
		height: 3rem;
		margin: 2rem 2.5rem;
	}
	
	.fenlei p {
		float: left;
		font-size: 3rem;
		margin: 1.5rem 0;
	}
	
	.xunhuanba {
		margin-top: 25rem;
		width: 58rem;
		height: 60rem;
		border-bottom: 0.05rem solid darkgray;
	}
	
	.jmhl,
	.rqkh,
	.mingpai {
		float: left;
		margin-left: 2rem;
		background: #f2f2f2;
		border-radius: 1rem;
		margin-top: 2rem;
	}
	
	.jmhl p,
	.rqkh p,
	.mingpai p {
		font-size: 2.7rem;
		padding: 2.4rem 2.7rem;
	}
	
	.gdfl {
		position: relative;
	}
	
	.gengduo a {
		position: absolute;
		left: 41rem;
		top: 50rem;
		font-size: 2.5rem;
	}
	.chongzhi{
		height: 10rem;
		margin-top: 4.5rem;
	}
	.cz{
		width: 29rem;
		float: left;
		font-size: 3rem;
		text-align: center;
		line-height: 10rem;
		background: gainsboro;
	}
	.qd{
		width: 29rem;
		float: left;
		font-size: 3rem;
		text-align: center;
		line-height: 10rem;
		background: #e53e42;
	}
</style>